<template>
  <div class="mobile-choose-group">
    <div class="title-wrap">
      <van-tabs v-model="activeTab" @click="loadChildGroup" :ellipsis="false" :swipe-threshold="1">
        <van-tab v-for="(item, index) in titleList" :key="index">
          <template #title> {{ item.name }} <van-icon class="van-arrow" name="arrow" v-if="titleList.length-1 != index"/></template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="seachInput">
      <!-- 输入任意文本 -->
      <van-field v-model="searchText" @input="searchTextFunc" placeholder="请输入搜索内容"/>
    </div>
    <ul class="content">
      <div class="content-org" v-if="groupList.length > 0">
        <div class="title">组织</div>
        <li v-for="(item, index) in groupList" :key="item.code + index || item.uid + index" @click="loadNextGroup(item)">
          {{ item.name }} <van-icon v-if="!item.leaf" name="arrow"/>
        </li>
      </div>
      <div class="content-org" v-if="memberList.length > 0">
        <div class="title">人员</div>
        <li @click="selectMember(item)" :class="{active: item.uid && uid === item.uid }" v-for="(item, index) in memberList" :key="item.uid + index">
          {{ item.name }}
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import { groupList, groupListChild, groupMember, userList } from '@/api/manage'
export default {
  name: 'ChooseGroup',
  data () {
    return {
      uid: '',
      activeTab: 0,
      searchText: '',
      titleList: [],
      groupList: [],
      memberList: [],
      groupListAll: [],
      memberListAll: [],
    }
  },
  created () {
    this.loadRootGroup()
  },
  methods: {
    searchTextFunc (val) {
      if (val) {
        if (this.groupList.length > 0) {
          this.groupList = this.groupListAll.filter(el => {
            return el.name.indexOf(val) > -1
          })
        }
        if (this.memberList.length > 0) {
          this.memberList = this.memberListAll.filter(el => {
            return el.name.indexOf(val) > -1
          })
        }
      } else {
        this.groupList = this.groupListAll.slice()
        this.memberList = this.memberListAll.slice()
      }
    },
    loadRootGroup () {
      groupList({ code: '' }).then(res => {
      // groupList({ status: 1, dataSources: 1 }).then(res => {
        if (res.code === 0) {
          // this.titleList = res.data
          this.groupList = res.data
          this.groupListAll = res.data
          this.titleList = [{
            name: '全部',
            code: 'all',
          }]
          // this.loadChildGroup(res.data[0].code, true)
        }
      })
    },
    loadChildGroup (index) {
      let item = this.titleList.filter((el, i) => {
        return index === i
      })
      item = item[0]
      let curCode = item.code
      if (item.code === 'all') {
        curCode = ''
        this.memberList = []
      }
      // 获取组织数据
      groupList({ code: curCode, }).then(res => {
         if (res.code === 0) {
          this.groupList = res.data
          this.groupListAll = this.groupList.slice()
          if (item.code === 'all') {
            this.titleList = [{
              name: '全部',
              code: 'all',
            }]
          } else {
            this.titleList.splice(index + 1, this.titleList.length - 1)
          }
        }
      })
      if (item.code !== 'all') {
        // 获取人员数据
        userList({
            orgCode: item.code,
            keyword: '',
            limit: 2000,
            pageNo: 1,
          }).then(res => {
            this.memberList = res.data.records || []
            this.memberListAll = this.memberList.slice()
        })
      }
    },
    loadNextGroup (item) {
      if (!item.leaf) {
        this.searchText = ''
        groupList({ code: item.code, }).then(res => {
          if (res.code === 0) {
            this.groupList = res.data
            this.groupListAll = this.groupList.slice()
          }
        })
        this.titleList.push(item)
        this.$nextTick(() => {
          this.activeTab = this.titleList.length - 1
        })
      }
      // 获取人员数据
      userList({
          orgCode: item.code,
          keyword: '',
          limit: 2000,
          pageNo: 1,
        }).then(res => {
          this.memberList = res.data.records || []
          this.memberListAll = this.memberList.slice()
      })
    },
    selectMember (item) {
      this.uid = item.uid
      console.log(this.uid)
      this.$emit('select', item)
    },
  },
}
</script>

<style lang="less">
.mobile-choose-group{
  height: 100%;
  background: #fff;
  .title-wrap{
      overflow-x: hidden;
      padding: 0 6px;
      color: #1890ff;
      height: 44px;
      overflow-y: hidden;
      display: flex;
      border-bottom: solid 1px #eee;
      flex-wrap: nowrap;
    >.item{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      word-break: keep-all;
      white-space: nowrap;
      padding: 0 2px;
      &:active,&:hover{
        // background:#ddd;
      }
      i{
        margin-left: 4px;
      }
      &:last-child{
        padding: 0 10px 0 2px;
      }
      &:first-child{
        padding: 0 2px 0 10px;
      }
    }
  }
  .van-arrow{
    top: 2px;
    left: 4px;
  }
  .van-tabs__line{
    display: none;
  }
  .van-tab__text{
    // color: #1989fa;
  }
  .van-tab--active{
    color: #1989fa;
  }
  .seachInput{
    .van-field__control{
      border: 1px solid #f2f2f2;
      border-radius: 2px;
      padding: 4px;
      box-sizing: border-box;
    }
  }
  .content{
    height: calc(100% - 98px);
    overflow-y: auto;
    li{
      list-style: none;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 0 20px;
      &:active,&:hover{
        background:#ddd;
      }
      &.active{
        background:#ddd;
      }
    }
  }
  .content-org{
    .title{
      padding: 10px 12px 0;
      color: #ccc;
    }
  }
}
</style>
